<template>
	<el-card>
		<el-form ref="ruleFormRef" label-width="auto" class="demo-ruleForm" :inline="true">
			<el-form-item label="业主id" prop="id">
				<el-input placeholder="请输入" />
			</el-form-item>
			<el-form-item label="法定业主" prop="user">
				<el-select placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="积分范围" prop="during">
				<div class="yq-flex-row">
					<el-input placeholder="请输入" style="width: 100px;" />
					<span style="margin:0 10px;">~</span>
					<el-input placeholder="请输入" style="width: 100px;" />
				</div>
			</el-form-item>
			<el-form-item label="手机号" prop="phone">
				<el-input placeholder="请输入" />
			</el-form-item>
		</el-form>
	</el-card>

	<el-card style="margin-top: 20px;">
		<div class="yq-flex-row yq-justify-between yq-margin-30">
			<div class="yq-flex-row yq-justify-start">
				<el-button type="primary"
					@click="dialogVisible = true;current = 1;addPonitTitle = '添加积分'">添加积分</el-button>
				<el-button type="primary"
					@click="dialogVisible = true;current = 2;addPonitTitle = '批量添加积分'">批量添加积分</el-button>
				<el-button type="primary" @click="showSetting">积分设置</el-button>
			</div>
			<el-button type="default">导出excel</el-button>
		</div>
		<el-table :data="tableData" border>
			<el-table-column prop="date" label="业主ID" width="180" />
			<el-table-column prop="name" label="法定业主" width="180" />
			<el-table-column prop="address" label="房间号" />
			<el-table-column prop="address" label="手机号" />
			<el-table-column prop="address" label="积分明细" />
			<el-table-column prop="address" label="备注" />
			<el-table-column prop="screening_type" fixed="right" width="180" label="操作" align="center">
				<template #default="scope">
					<el-button type="danger" size="mini" @click="showDetail(scope.row.id)">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>
		 <el-pagination layout="prev, pager, next" :total="50" />
	</el-card>
	<!-- 添加积分 -->
	<el-dialog v-model="dialogVisible" :title="addPonitTitle" width="700px" :before-close="handleClose">
		<el-form ref="addPonitForm" label-width="auto" class="demo-ruleForm">
			<el-form-item label="当前业主" prop="user" v-if="current === 1">
				<el-select placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="可用积分" prop="during">
				xxx
			</el-form-item>
			<el-form-item label="变化" prop="phone">
				<el-radio-group v-model="addPonitForm.change" class="ml-4">
					<el-radio value="1" size="large">增加</el-radio>
					<el-radio value="2" size="large">减少</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="备注" prop="desc" v-if="current === 1">
				<el-input type="textarea" />
			</el-form-item>
			<el-form-item label="操作员密码" prop="phone">
				<el-input placeholder="请输入" />
			</el-form-item>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="dialogVisible = false">
					确认
				</el-button>
			</div>
		</template>
	</el-dialog>
	<Setting ref="settingRef" />
	<Detail ref="detailRef" />
</template>

<script setup>
	import {
		reactive,
		toRefs,
		ref
	} from "vue"
	import Setting from './components/setting.vue'
	import Detail from './components/detail.vue'
	const data = reactive({
		ruleFormRef: {
			id: '',
			user: '',
			during: '',
			phone: '',
		},
		addPonitForm: {

		},
		options: [],
		tableData: [{}],
		dialogVisible: false, //添加积分dialog
		current: null,
		addPonitTitle: '添加积分'
	})
	const {
		ruleFormRef,
		tableData,
		dialogVisible,
		addPonitForm,
		current,
		addPonitTitle,
		options
	} = toRefs(data)

	const settingRef = ref(null)
	const detailRef = ref(null)
	const showSetting = () => {
		settingRef.value.showModal()
	}

	const showDetail = () => {
		detailRef.value.showModal()
	}
</script>

<style>

</style>